<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Random Password Generator</title>

    <style>
      body {
        background-color: aquamarine;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }
      
      h1,
      h2 {
        text-align: center;
        padding: 15px;
      }
      
      table {
        margin-left: auto;
        margin-right: auto;
        padding: 20px;
        border: 2px solid brown;
        font-size: 18px;
        font-weight: 500;
      }
      
      td {
        padding: 10px;
      }

      button {
        margin-left: auto;
        margin-right: auto;
        width: 80px;
        height: 40px;
        border-radius: 5px;
        font-family: "Courier New", Courier, monospace;
      }
      
      button:hover {
        width: 85px;
        height: 45px;
        box-shadow: inset;
      }
      
      .highlight {
        text-shadow: -3px 0px 3px yellow, 3px 0px 3px yellow, 6px 0px 6px yellow,
          -6px 0px 6px yellow;
      }
    </style>
  </head>
  <body>
    <h1>Random Password Generator</h1>

    <table>
      <form>
        <tr>
          <td>
            <label for="length">Password Length:</label>
          </td>
          <td>
            <input id="length" type="number" />
          </td>
        </tr>

        <tr>
          <td>
            <input
              id="lowercase"
              type="checkbox"
              name="lowercase"
              value="lowercase"
            />Lowercase
          </td>

          <td>
            <input
              id="uppercase"
              type="checkbox"
              name="uppercase"
              value="uppercase"
            />Uppercase
          </td>
        </tr>

        <tr>
          <td>
            <input
              id="symbols"
              type="checkbox"
              name="symbols"
              value="symbols"
            />Symbols
          </td>

          <td>
            <input
              id="numbers"
              type="checkbox"
              name="numbers"
              value="numbers"
            />Numbers
          </td>
        </tr>
        <tr>
          <td>
            <button id="reset" type="reset">Reset</button>
          </td>

          <td><button id="submit" type="submit">Generate</button></td>
        </tr>
      </form>
    </table>

    <h2 id="generated-password" class="highlight"></h2>
    <button id="copy-button" style="display: none; width: 100px; height: 60px">
      Copy Password
    </button>

    <script>
      let submit = document.getElementById("submit");
      let copyButton = document.getElementById("copy-button");
      let reset = document.getElementById("reset");
      let password = "";

      // All characters from which password will be generated
      const charNumbers = "1234567890";
      const charLowerCase = "qwertyuiopsdfghjklzxcvbnm";
      const charUpperCase = "QWERTYUIOPASDFGHJKLZXCVBNM";
      const charSymbols = `~!@#$%^&*()_+=-{}:">?<,./;'[]|\`\\`;
      let finalString = "";

      submit.onclick = () => {
        password = "";
        event.preventDefault();

        let length = document.getElementById("length").value;
        let lowercase = document.getElementById("lowercase").checked;
        let uppercase = document.getElementById("uppercase").checked;
        let symbols = document.getElementById("symbols").checked;
        let numbers = document.getElementById("numbers").checked;

        // If checkbox is checked, related string will be concatenated with the final string
        if (lowercase === true) {
          finalString += charLowerCase;
        }

        if (uppercase === true) {
          finalString += charUpperCase;
        }

        if (numbers === true) {
          finalString += charNumbers;
        }

        if (symbols === true) {
          finalString += charSymbols;
        }

        // Password generation
        for (let i = 0; i < length; i++) {
          finalLength = finalString.length;
          password += finalString.charAt(
            Math.floor(Math.random() * finalString.length)
          );
        }

        document.getElementById("generated-password").innerHTML = password;
        copyButton.style.display = "block";
      };

      // Copy Password in the clipboard
      copyButton.onclick = () => {
        const listener = function (event) {
          event.preventDefault();
          event.clipboardData.setData("text/plain", password);
        };

        document.addEventListener("copy", listener);
        document.execCommand("copy");
        document.removeEventListener("copy", listener);
        copyButton.innerHTML = "Password Copied!";
      };

      // Reset form fields and previous password
      reset.onclick = () =>
        (document.getElementById("generated-password").innerHTML = "");
    </script>
  </body>
</html>
